<template>
  <el-tag :color="bgColor" :style="tagStyle" v-bind="attrs" @click="itemEvent">
    <text-base :itemStyle="tagFontStyle" v-bind="attrs"></text-base>
  </el-tag>
</template>
<script setup>
import TextBase from '../text/TextBase.vue';
const props = defineProps({
  bgColor: {
    // 背景颜色
    type: String,
    default: '',
  },
  style: {
    // 除背景颜色之外的其他样式
    type: Object,
    default: () => ({}),
  },
  fontStyle: {
    // 显示的文本样式
    type: Object,
    default: () => ({}),
  },
  row: {
    // form数据,或者table的行数据
    type: Object,
    default: () => ({}),
  },
});

const attrs = useAttrs();

const emits = defineEmits(['itemEvent']);



const tagStyle = computed(() => {
  return {
    borderColor: props.fontStyle.color,
    ...props.style,
  };
});

const tagFontStyle = computed(() => {
  return {
    ...props.fontStyle,
  };
});
function itemEvent() {
  emits('itemEvent', {
    row: props.row,
  });
}
</script>

<style lang="scss" scoped>
.tag_base {
  padding: 0 7px;
  height: 18px;
  line-height: 18px;
}
</style>
